import React, { Component,createRef } from 'react';
import {withRouter} from 'react-router-dom'
import { Form, Input, Button,Row, Col,message} from 'antd';

import Captcha from '@/components/Captcha'
import Model from '@/model/common'
const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 16,
    },
  };
  const tailLayout = {
    wrapperCol: {
      offset: 4,
      span: 20,
    },
  };
class NormalLogin extends Component {
    constructor (props){
        super(props)
        this.ref_captcha = createRef()
    }
    state = {
        key:"",
        loading:false,
    }
    render() {
        return (
            <div>
                <Form
      {...layout}
      name="basic"
      initialValues={{
        remember: true,
      }}
      onFinish={this.onFinish}
      onFinishFailed={this.onFinishFailed}
    >
      <Form.Item
        label="用户名"
        name="username"
        rules={[
          {
            required: true,
            message: '请输入你的用户名！',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="密码"
        name="password"
        rules={[
          {
            required: true,
            message: '请输入你的密码！',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>
        
      <Form.Item label="验证码" >
        <Row gutter={8}>
          <Col span={14}>
            <Form.Item
              name="captcha"
              noStyle
              rules={[
                {
                  required: true,
                  message: '请输入你得到的验证码！',
                },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={10}>
          <Captcha height="31.6" setKey={this.setKey} ref={this.ref_captcha}></Captcha>
          </Col>
        </Row>
      </Form.Item>

      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit" block loading={this.state.loading}>
          登录
        </Button>
      </Form.Item>
    </Form>
            </div>
        );
    }
     onFinish = (values) => {
         //组合一下key
         values["key"] = this.state.key
         //
         Model.normal_login(values).then(ret=>{
             console.log(ret);
            //  localStorage.getItem("")
             if(ret.errNo ===0){
              this.setState(()=>{
                return {
                   loading:true
                }
              })
             message.success(ret.message,2,()=>{
                this.props.history.push("/home")
                // this.setState(()=>{
                //     return {
                //         loading:false
                //     }
                // }) 
             })
             }
             else{
             message.error(ret.errText)
             //调用子组件刷新验证码
             this.ref_captcha.current.loadCaptcha()
             }
         })
      };
    onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
      };
      setKey = (key)=>{
            this.setState(()=>{
                return {
                    key
                }
            })
      }
}

export default withRouter(NormalLogin);
